function render(type, color1, color2) {
    for (var i = 0; i < navT.length; i++) {
        if (type === onmouseover) {
            navT[i].onmouseover = function (e) {

                e.target.style.color = color1
                e = e || window.event;

            }
        }
        if (type === onmouseout) {
            navT[i].onmouseout = function (e) {
                e.target.style.color = color2
                e = e || window.event;
            }
        }
    }
}
function render1(num) {
    for (var i = 0; i < shop.length; i++) {
        shop[num].onmouseover = function (e) {
            e = e || window.event;
            this.style.background = '#ffffff'
            this.style.borderBottom = "1px dashed #e6e6e6"
            showNav[num].style.display = 'block';
            render(onmouseover, "red", "#818181");

        }
        shop[num].onmouseout = function (e) {
            e = e || window.event;
            this.style.background = '#e6e6e6'
            showNav[num].style.display = 'none';
            this.style.borderBottom = ""
        }
    }
}
function render2(ele) {
    var sw = new Swiper(ele, {
        // 无限循环;
        loop: true,
        // 按钮
        /*  navigation: {
             nextEl: '.swiper-button-next',
             prevEl: '.swiper-button-prev',
         }, */
        // 分页器

        pagination: {
            el: '.swiper-pagination',
        },
        effect: "slide",
        autoplay: true,
        clickable: true,
    });
    // 外部配置自动播放;
    sw.el.onmouseover = function () {
        sw.autoplay.stop();
    }
    sw.el.onmouseout = function () {
        sw.autoplay.start();
    }
    for (i = 0; i < sw.pagination.bullets.length; i++) {
        sw.pagination.bullets[i].onmouseover = function () {
            this.click();
        };
    }
    sw.params.pagination.clickable = true;
    sw.pagination.destroy()
    sw.pagination.init()
    sw.pagination.bullets.eq(0).addClass('swiper-pagination-bullet-active');
}
function renderData(ele, data) {
    data.forEach(function (item, index) {
        ele.innerHTML += ` <li idx= ${item.id} class= "scaleBtn"> 
    <img src="${item.imgsrc}" alt="">
        <p>${item.title}</p>
        <span>${item.price}</span>
     </li>
        `
    })
}
function scalePic(ele) {
    $(ele).on("mouseover", ".scaleBtn", function (e) {
        $(e.target).css({
            transform: 'scale(1.02)',
        })
    })
    $(ele).on("mouseout", ".scaleBtn", function (e) {
        $(e.target).css({
            transform: 'scale(1)',
        })
    });
}

/* fdj */
function Magnifier() {
    // 正方形小盒子
    this.square = document.querySelector(".grayBox");
    // 小盒子容器
    this.small = document.querySelector(".showShopimg_l");
    // 小图 ;
    this.small_img = document.querySelector(".showShopimg_l img");
    // 大盒子容器
    this.big = document.querySelector(".scaleImg");
    // 大图片
    this.big_img = document.querySelector(".scaleImg img");
    // 找到按钮 
    this.index = 0;
    // this.btns = document.querySelectorAll(".choice-btn img");

    this.square_size = {
        width: parseInt(getComputedStyle(this.square).width),
        height: parseInt(getComputedStyle(this.square).height)
    }
    // 获取小盒子宽高;
    this.small_size = {
        width: this.small.offsetWidth,
        height: this.small.offsetHeight,
    }
    // 获取大容器的宽高;
    this.big_size = {
        width: parseInt(getComputedStyle(this.big).width),
        height: parseInt(getComputedStyle(this.big).height)
    }
    // 大图片的宽高;
    this.big_img_size = {
        width: parseInt(getComputedStyle(this.big_img).width),
        height: parseInt(getComputedStyle(this.big_img).height)
    }

    this.bindEvent();
}
Magnifier.prototype.bindEvent = function () {
    var self = this;
    // 元素显示隐藏;
    this.small.onmouseover = function () {
        self.square.style.display = "block";
        self.big.style.display = "block";
    }
    this.small.onmouseout = function () {
        self.square.style.display = "none";
        self.big.style.display = "none";
    }
    // 鼠标运动;
    this.small.onmousemove = function (evt) {
        var e = evt || event;
        var _left = e.offsetX - 50;
        var _top = e.offsetY - 50;
        // top 是关键字; 无法作为变量存储数据;
        if (_left < 0) {
            _left = 0;
        }
        if (_top < 0) {
            _top = 0;
        }
        var max_left = self.small_size.width - self.square_size.width - 8;
        if (_left > max_left) {
            _left = max_left;
        }

        var max_top = self.small_size.height - self.square_size.height - 8;

        if (_top > max_top) {
            _top = max_top;
        }

        self.square.style.left = _left + "px";
        self.square.style.top = _top + "px";

        // 计算位移的百分比;
        var prop_left = (_left / max_left).toFixed(2);
        var prop_top = (_top / max_top).toFixed(2);
        // 大盒子最大的移动距离;
        var big_box_max_left = self.big_img_size.width - self.big_size.width;
        var big_box_max_top = self.big_img_size.height - self.big_size.height;
        // 计算距离
        self.big_img.style.left = -big_box_max_left * prop_left + "px";
        self.big_img.style.top = - big_box_max_top * prop_top + "px";

    }

    // for (var i = 0; i < this.btns.length; i++) {
    //     this.btns[i].index = i;
    //     this.btns[i].onmouseover = function () {
    //         self.index = this.index;
    //         self.small_img.src = this.src;
    //         self.big_img.src = this.src;
    //     }
    // }

}